<script setup>
import { getBePaidOrderDeatil, payByWechatFee } from '@/api/my';

//定义响应式变量
const orderId = ref(0);
const rentOrder = ref(null);
const payway = ref(null);

//查询订单数据
const initData = async () => {
  try {
    const response = await getBePaidOrderDeatil(orderId.value);
    rentOrder.value = response.data;
    payway.value = rentOrder.value.RentboxOrder.payway === 'wechat_mini_fee' ? 2 : 1;
  } catch (error) {
    console.error(error);
  }
};

//检查支付状态,并立即支付
const pay = () => {
  if (payway.value === 2) {
    payByMiniFee();
  } else {
    payByWe();
  }
};

//发起重新支付
const payByWe = async () => {
  try {
    const res = await getBePaidOrderDeatil(orderId.value);
    if (res.data.code === 200) {
      uni.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      });
      uni.redirectTo({
        url: `/pages/orderdetails/orderdetails?id=${orderId.value}`
      });
    } else {
      uni.redirectTo({
        url: `/pages/error/error?msg=${res.data.msg}&orderUuid=${rentOrder.value.RentboxOrder.uuid}`
      });
    }
  } catch (error) {
    console.error(error);
  }
};

const payByMiniFee = async () => {
  try {
    const res = await payByWechatFee(orderId.value);
    if (res.data.code === 200) {
      uni.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      });
      uni.redirectTo({
        url: `/pages/orderdetails/orderdetails?id=${orderId.value}`
      });
    } else {
      uni.redirectTo({
        url: `/pages/error/error?msg=${res.data.msg}&orderUuid=${rentOrder.value.RentboxOrder.uuid}`
      });
    }
  } catch (error) {
    console.error(error);
  }
};

//对金额进行截取
const toFix = (value) => {
  return parseFloat(value).toFixed(2);
};

//页面加载监听
onLoad((options) => {
  orderId.value = options.orderId;
  initData();
});
</script>

<template>
  <view class="all">
    <view class="box_1">
      <view class="orderFee">订单费用</view>
      <view>
        <view class="symbol">￥</view>
        <!-- <view class="money">{{ toFix(rentOrder.RentboxOrder.fee) }}</view> -->
        <view class="money">5.00</view>
      </view>
      <!-- <view class="orderUuid">订单编号 {{ rentOrder.RentboxOrder.uuid }}</view> -->
      <view class="orderUuid">订单编号 512622321251522662151515</view>
    </view>
    <view class="box_2">
      <view class="box_3">
        <image class="icon" src="@/static/images/icon_wechatpay.png"></image>
        <view v-show="payway !== 2" class="text">微信小程序支付</view>
      </view>
      <view class="box_6">
        <view v-show="payway !== 1" class="text">微信小程序免押金支付</view>
        <image class="icon" src="@/static/images/icon_mini_nike.png"></image>
      </view>
    </view>
    <view @click="pay" class="box_4">
      <text class="text_1">立即支付</text>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f8f8fb;
}
.all {
  display: flex;
  flex-direction: column;
  align-items: center;
  .box_1,
  .box_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 662rpx;
    background: #ffffff;
    box-shadow: 0px 0px 18rpx 0px rgba(223, 223, 229, 0.5);
    border-radius: 12rpx;
    margin-bottom: 30rpx;
  }
  .box_1 {
    padding: 30rpx 0;
  }

  .symbol {
    font-size: 40rpx;
    font-weight: bold;
    color: #a1a1a1;
  }
  .money {
    margin: -40rpx 0 0 35rpx;
    font-size: 100rpx;
    font-weight: bold;
    color: #202020;
  }
  .box_2 {
    flex-direction: row;
    justify-content: space-around;
    margin-top: 30rpx;
    padding: 30rpx 0;
  }
  .box_3,
  .box_6 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .box_6 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .icon {
    width: 56rpx;
    height: 60rpx;
  }
  .text,
  .orderFee,
  .orderUuid {
    margin-top: 30rpx;
    font-size: 30rpx;
    color: #202020;
  }
  .orderFee,
  .orderUuid {
    font-weight: 500;
    text-align: center;
  }
  .box_4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 300rpx;
    width: 650rpx;
    height: 90rpx;
    border-radius: 50rpx;
    background-color: #2185f5;
  }
  .text_1 {
    font-size: 36rpx;
    color: #ffffff;
  }
}
</style>
